/**
 *  Created by clz on
 *  Function:
 *  Desc: 自定义的TabBar
 */
import React, {Component} from 'react';
import {View, StyleSheet,Button,Text,TouchableOpacity} from 'react-native';
import px2dp from "../../px2dp";
import Screen from "../utiles/Screen";

const Button1 = (props) => {
    return (
        <TouchableOpacity {...props} activeOpacity={0.95}>
            {props.children}
        </TouchableOpacity>
    )
};
export default class segmentTabBar extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <View style={[styles.tabBarBox,{flexDirection:'row'}]}>
                <Text style={{fontSize:px2dp(28)}}>猜猜</Text>
                <View style={{flexDirection:'row', flex:1}}>
                    {
                        this.props.tabs.map((name,page)=>{
                            const isTabActive = this.props.activeTab === page;
                            const renderTab = this.props.renderTab || this.renderTab;
                            return renderTab(name, page, isTabActive, this.props.goToPage);
                        })
                    }
                </View>
            </View>
        )
    }
    renderTab(name, page, isTabActive, onPressHandler) {
        const textColor = isTabActive ? '#FFFFFF' : '#9C9C9C';
        const backgroundColor = isTabActive ? '#004DCF' : '#FFFFFF';
        console.log(textColor)
        return <Button1
            style={{flex: 1, height: px2dp(68), backgroundColor}}
            key={name}
            accessible={true}
            accessibilityLabel={name}
            accessibilityTraits='button'
            onPress={() => onPressHandler(page)}
        >
            <View style={[styles.tab]}>
                <Text style={[{color: textColor, fontSize:px2dp(24)},]}>
                    {name}
                </Text>
            </View>
        </Button1>;
    }

}

const styles = StyleSheet.create(
    {
        tabBarBox:{
            height:px2dp(75),
            flexDirection:'row',
            alignItems:'center',
            justifyContent:'center',
            backgroundColor:'yellow'
        },
        tab:{
            flex:1,
            justifyContent:'center',
            alignItems:'center'
        },
        tabs:{
            borderRadius:px2dp(2),
            borderColor:'#0086E5',
            borderWidth:px2dp(1),
            width:Screen.width,
            flexDirection: 'row',
            alignItems: 'center',
            alignContent: 'center',
            justifyContent: 'space-around',
        }
    }
);
